<template>
  <div class="indexBox">
    <template v-if="urlList.length > 0">
      <div class="toolBox">
        <el-button plain @click="prePage">上一合同</el-button>
        <div v-if="urlList.length > 0" style="text-align: center">
          <div>
            <span style="color: #fff">{{ currentFile + 1 }}</span>/
            <span>{{ urlList.length }}</span>
          </div>
        </div>
        <el-button plain @click="nextPage">下一合同</el-button>
      </div>

      <div class="pdf-wrapper">
        <!-- PDF展示部分 -->
        <div class="pdf-content">
          <div class="pdf-contain">
            <VueOfficeDocx
              :src="pdfUrl"
              style="width: 100%; height: 100%;"
              @error="errorHandler"
              @rendered="renderedHandler"
            />
          </div>
        </div>
      </div>
    </template>
    <div v-show="currentFile + 1 === urlList.length || urlList.length === 0" class="sign">
      <div class="button" @click="handleOpenDialog">前去签署</div>
    </div>
    <van-dialog
      v-model="vanDialogShow"
      title="提示"
      show-cancel-button
      confirm-button-color="black"
      :before-close="handleConfirm"
      width="90%"
      @confirm="handleConfirm"
    >
      <div class="tips-dialog">
        <div class="tips">
          <div>请仔细阅读合同条款，阅读完成后将下列的文字填写至文本框中。</div>
          <div v-Clipboard="copyText" class="copy-text-warp">
            <span class="copy-text">
              {{ copyText }}
              <i class="el-icon-document-copy icon" />
            </span>
          </div>
        </div>
        <div style="margin-top: 10px;">
          <el-input v-model="content" placeholder="请输入提示内容已继续操作" />
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import { agreeProtocol, getSynthesizedWordsNoSign, refreshWord } from '@/api/agree'
// import pdf from 'vue-pdf'
import VueOfficeDocx from '@vue-office/docx'
import 'vant/lib/index.css'
import { Dialog, Toast } from 'vant'
export default {
  components: {
    // pdf,
    VueOfficeDocx,
    [Dialog.Component.name]: Dialog.Component,
    [Toast.name]: Toast
  },
  data() {
    return {
      currentFile: 0,
      copyText: '本人已阅读全部合同资料，充分了解并清楚知晓该合同的相关信息， 愿意遵守合同(协议)的相关规则。',
      urlList: [],
      vanDialogShow: false,
      show: true,
      pageTotalNum: 1,
      pdfUrl: '',
      url: '',
      isRouterAlive: true,
      wx: undefined,
      uni: undefined,
      urlContent: '',
      jumpUrl: '',
      content: ''
    }
  },
  created() {
    this.setScriptElement(this.wx, this.uni, this.filterDuplicate)
    this.init(this.$route.query.id, this.$route.query.entryId)
    // this.getdata(this.$route.query.id, this.$route.query.entryId)
    console.log('this.$router.query--------->', this.$router.query)
    this.processRouting()
  },
  methods: {
    async init(id, entryId) {
      Promise.allSettled([
        await this.synchronization(id, entryId),
        await this.getdata(id, entryId)
      ])
    },
    async synchronization(id, entryId) {
      try {
        const res = await refreshWord(id, { entryId })
        console.log('res --------->', res)
      } catch (error) {
        console.log('error --------->', error)
      }
    },
    renderedHandler(e) {
      console.log('渲染完成  --------->')
      console.log('e  renderedHandler--------->', e)
    },
    errorHandler(e) {
      console.log('渲染失败  --------->')
      console.log('error  errorHandler--------->', e)
    },
    filterDuplicate(id) {
      if (document.head.querySelector(id)) {
        return null
      } else {
        return document.head
      }
    },
    setScriptElement(wx, uni, fun) {
      wx = document.createElement('script')
      uni = document.createElement('script')
      wx.id = 'wxScript'
      uni.id = 'uniScript'
      wx.type = 'text/javascript'
      uni.type = 'text/javascript'
      wx.async = false
      uni.async = false
      wx.src =
        'https://obs-user-test.obs.cn-east-3.myhuaweicloud.com:443/test_1659066827_VqED58Z4NF.js'
      uni.src =
        'https://obs-user-test.obs.cn-east-3.myhuaweicloud.com:443/test_1659066855_4SntW8kOwj.js'
      fun('#wxScript') && fun('#wxScript').appendChild(wx)
      fun('#uniScript') && fun('#uniScript').appendChild(uni)
    },
    processRouting() {
      this.urlContent = this.$route.query
      if (this.urlContent.url) {
        const isSymbol = this.urlContent.url.indexOf('?') === -1 ? '?' : '&'
        if (this.urlContent.identification == 'null') {
          this.jumpUrl = this.urlContent.url
        } else {
          this.jumpUrl = this.urlContent.url
          const transmit = Object.keys(this.urlContent)
          let i = 0
          transmit.forEach((element, index) => {
            if (element != 'url') {
              if (i == 0 && isSymbol == '?') {
                i++
                console.log(isSymbol == '?')
                this.jumpUrl =
                  this.jumpUrl +
                  isSymbol +
                  element +
                  '=' +
                  this.urlContent[element]
              } else {
                this.jumpUrl =
                  this.jumpUrl + '&' + element + '=' + this.urlContent[element]
              }
            }
            console.log(this.jumpUrl)
          })
        }
      }
    },
    handleOpenDialog() {
      this.vanDialogShow = true
    },

    handleConfirm(action, done) {
      console.log('action ------>', action)
      if (!this.content && action === 'confirm') {
        this.$toast('请输入提示内容已继续操作')
        return done(false)
      } else if (action === 'confirm' && this.content) {
        done()
        this.goSign()
      } else {
        done()
      }
    },

    goSign() {
      uni.postMessage({
        data: {
          customIssu: 'success'
        }
      })
      console.log('111我调用了')
      uni.navigateTo({
        url: `${this.jumpUrl}&sign=1`
      })
    },
    reload() {
      this.isRouterAlive = false
      this.$nextTick(function() {
        this.isRouterAlive = true
      })
    },
    getdata(id, entryId) {
      getSynthesizedWordsNoSign(id, { entryId })
        .then((res) => {
          this.urlList = res.data
          this.getpdf()
        })
        .catch((err) => {})
    },
    // 解析pdf
    getpdf() {
      console.log('proc--------->', process.env.VUE_APP_UPLOAD)
      console.log('window.location.origin--------->', window.location.origin)
      if (window.location.origin.indexOf('https://oatest.mouldc.com') > -1) {
        console.log('development--------->', 'development')
        this.pdfUrl = `https://oatest.mouldc.com/storage/${this.urlList[this.currentFile].agree}`
      } else if (window.location.origin.indexOf('https://oa.mouldc.com') > -1) {
        this.pdfUrl = `https://oa.mouldc.com/storage/${this.urlList[this.currentFile].agree}`
      } else {
        console.log('local--------->', 'local')
        this.pdfUrl = `/doc/storage/${this.urlList[this.currentFile].agree}`
      }
    },
    // 上一页函数，
    prePage() {
      let page = this.currentFile
      page = page > 0 ? page - 1 : this.urlList.length - 1
      this.currentFile = page
      this.getpdf()
    },
    // 下一页函数
    nextPage() {
      let page = this.currentFile
      page = page > this.urlList.length - 2 ? 0 : page + 1
      this.currentFile = page
      this.getpdf()
    }
  }
}
</script>

<style lang="scss" scoped>
.indexBox {
  height: 100%;
  // overflow: hidden;
  margin-bottom: 50px;
  // display: flex;
  // flex-direction: column;
  // align-items: center;
  .toolBox {
    padding: 10px 0;
    background-color: #323639;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  }

  .sign {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: #f1f1f1;
    height: 80px;
  }

  .button {
    height: 80px;
    position: relative;
    line-height: 80px;
    text-align: center;
  }

  .pdfViewBox {
    margin: 0 auto;
    padding-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 85%;
    height: 90%;
  }

  .pdf-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    position: relative;
  }

  .pdf-wrapper span {
    width: 100%;
  }

  .tools {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 999;
  }

  .pdf-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 98%;
    overflow-x: hidden;

    .numBox {
      margin: 10px 0;
      font-size: 16px;
    }

    .pdf-contain {
      width: 100%;
      overflow-x: hidden;
      border: 1px solid #eee;

      .pdf-show {
        width: 100%;
      }
    }
  }

  .pdf-button {
    width: 240px;
    height: 60px;
    font-size: 30px;
    border-radius: 20px;
  }

  .pdf-button:hover {
    cursor: pointer;
    transform: scale(1.2);
  }

  .page {
    font-size: 48px;
    color: #fff;
  }

  .loadingi {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .tips-dialog {
    padding: 10px;
    .tips {
      padding: 10px;
      border: 1px solid #db2828;
      background: #ffe8e6;
      border-radius: 5px;
      color: #db2828;
      line-height: 25px;
      .copy-text-warp {
        margin-top: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        .copy-text {
          font-size: 14px;
          color: #333;
          border-bottom: 1px dashed #db2828;
        }
        .icon {
          color: #333;
          margin-left: 10px;
        }
      }
    }
  }
}
@media screen and (max-width: 800px) {
  ::v-deep .vue-office-docx {
    .vue-office-docx-main {
      .docx-wrapper {
        padding: 10px!important;
        .docx {
          padding: 10px!important;
          width: 100%!important;
          overflow: auto !important;
        }
      }
    }
  }
}
</style>
